<template>
  <div class="d-flex ai-center text-left">
    <div class="img">
      <el-popover v-if="model.img_id" placement="left" trigger="hover">
        <div slot="reference">
          <el-image :src="model.img_id" :alt="model.img_id" style="height: 90px;width: 90px" />
          <div v-if="model.hou_sub_type == 1 && model.hou_sub_type_state == 10" class="vr-div full-view">
            <img class="vr-img" src="@/assets/images/icons/fullView2.png" alt srcset />
          </div>
        </div>
        <el-image :src="model.img_id" style="height: 500px;width: 500px" />
      </el-popover>

      <div v-else class="full no-img-box d-flex">
        <img src="@/assets/images/no.png" style="height: 90px;width: 90px" />
      </div>
    </div>
    <div class="body">
      <!-- <div class="ellipsis">{{ model.title|getActiveStr(30) }}</div> -->
      <div class="ellipsis">{{ model.resblock_name }}</div>
      <div class>
        <span>{{ model.room ? model.room + "室" : "" }}</span>
        <span v-if="model.room">{{ (model.hall || 0) + "厅" }}</span>
        <span>{{ !model.room && !model.hall ? "未填户型" : "" }}</span>

        <span>| {{ model.build_size != -1 && model.build_size ? model.build_size + "㎡" : "未填面积" }}</span>

        <span v-if="model.delegation_type != 'SALES'"
          >| {{ model.total_prices > 0 ? model.total_prices + "元 /月" : "未填价格" }}</span
        >
        <span v-if="model.delegation_type == 'SALES'"
          >| {{ model.total_prices > 0 ? model.total_prices / 10000 + "万" : "未填价格" }}</span
        >
      </div>
      <div class="compound_title">
        <span v-if="model.hou_sub_type_state == 1" class="compound compounding">VR下载中</span>
        <span v-else-if="model.hou_sub_type_state == -1" class="compound compound_failed">VR下载失败</span>
        <span v-if="model.sphere_status == 1" class="compound compounding">全景图合成中</span>
        <span v-else-if="model.sphere_status == 10" class="compound compounded">全景图已合成</span>
        <span v-else-if="model.sphere_status == -1" class="compound compound_failed">全景图合成失败</span>
        <span v-if="model.video_status == 1" class="compound compounding">视频合成中</span>
        <span v-else-if="model.video_status == 10" class="compound compounded">视频已合成</span>
        <span v-else-if="model.video_status == -1" class="compound compound_failed">视频合成失败</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    model: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.img {
  min-width: 90px;
  width: 90px;
  height: 90px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  .vr-div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    .vr-img{
      position: absolute;
      height:30px;
      width:30px;
      left: 6px;
      bottom: 6px;
    }
  }
}
.full-view {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.no-img-box {
  // background: rgb(244, 244, 244);
}
.body {
  min-width: 200px;
  margin-left: 26px;

  .compound {
    display: inline-block;
    padding: 2px 5px;
    color: #fff;
    border-radius: 2px;
  }
  .compounding {
    background: #ffd700;
  }
  .compounded {
    background: #ccc;
  }
  .compound_failed {
    background: #f75353;
  }
  .compound_title span:first-child {
    margin-right: 10px;
  }
}
</style>
